import {designPage, reactive, useRefs} from "plain-design-composition";
import {DemoRow} from "../../Demo/DemoRow";
import {Tooltip} from "../../../../packages/components/Tooltip";
import {Button, useTooltip} from "../../../../packages";
import Input from "../../../../packages/components/Input";
import SearchOutlined from '@ant-design/icons/SearchOutlined';

export const demo1 = designPage(() => {
  return () => (
    <DemoRow title="基本用法">
      <Tooltip message="Tooltip message">
        <Button label="Button"/>
      </Tooltip>
      <Tooltip message="Tooltip message">
        <span>Text</span>
      </Tooltip>
      <Tooltip message="Favorite">
        <SearchOutlined/>
      </Tooltip>
    </DemoRow>
  );
});

export const demoOverflowTooltip = designPage(() => {

  const state = reactive({
    tooltipText: '文本长度溢出时tooltip显示文本',
  });

  return () => (
    <DemoRow title="溢出时tooltip显示">
      <Input v-model={state.tooltipText} width={300}/>
      <Tooltip message="Tooltip文本" overflowTooltip>
        <div style={{ display: 'inline-block', width: '100px', }}>
          {state.tooltipText}
        </div>
      </Tooltip>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {
  return () => (
    <DemoRow title="白色主题">
      <Tooltip message="Tooltip message" dark={false}>
        <Button label="Button"/>
      </Tooltip>
    </DemoRow>
  );
});

export const demoUseTooltip = designPage(() => {

  const { refs, onRef } = useRefs({ el: HTMLElement });

  const state = reactive({
    message: '123' as any
  });

  useTooltip({
    ignoreEmptyMessage: true,
    tooltip: () => ({
      reference: refs.el,
      message: state.message,
    })
  });

  return () => (
    <DemoRow title="useTooltip ==>> ignoreEmptyMessage:true">
      <Input v-model={state.message} width={300}/>
      <span ref={onRef.el}>reference</span>
    </DemoRow>
  );
});

export const demoUseTooltip2 = designPage(() => {

  const { refs, onRef } = useRefs({ el: HTMLElement });

  const state = reactive({
    message: '123' as any
  });

  useTooltip({
    ignoreEmptyMessage: false,
    tooltip: () => ({
      reference: refs.el,
      message: state.message,
    })
  });

  return () => (
    <DemoRow title="useTooltip ==>> ignoreEmptyMessage:false">
      <Input v-model={state.message} width={300}/>
      <span ref={onRef.el}>reference</span>
    </DemoRow>
  );
});

export const demoUseTooltipOverflow = designPage(() => {

  const { refs, onRef } = useRefs({ el: HTMLElement });

  const state = reactive({
    message: '货拉拉拉不拉拉布拉多取决于拉布拉多在货拉拉上拉的多不多' as any
  });

  useTooltip({
    overflow: true,
    tooltip: () => ({
      reference: refs.el,
      message: state.message,
      status: 'error',
    }),
  });

  return () => (
    <DemoRow title="useTooltip(overflow)">
      <Input v-model={state.message} width={300}/>
      <div ref={onRef.el} style={{ display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100px' }}>{state.message}</div>
    </DemoRow>
  );
});
